<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>从化绿波</title>
  <link href="./css/index.css" rel="stylesheet">
  <style>
    #login {
      width: 100vw;
      height: 100vh;
      position: relative;
      background-image: url("./assets/login-background.png");
      background-size: cover;
      /* color: #fff; */
    }
    .login-form {
      position: absolute;
      right: 10%;
      top: 50%;
      transform: translateY(-50%);
      background-color: #fff;
      width: 300px;
      height: 300px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 20px;
    }
    .form-item {
      display: flex;
      /* justify-content: space-between; */
      align-items: center;
      margin-bottom: 20px;
    }
    .form-label {
      flex: 0 0 50px;
      text-align: right;
      margin-right: 10px;
    }
    .login-title {
      font-weight: 600;
      font-size: 22px;
      display: flex;
      justify-content: center;
      position: relative;
      top: -20px;
    }
    .login-btn {
      width: 100%;
      position: relative;
      bottom: -30px;
    }
    .progrom-title {
      position: absolute;
      left: 50px;
      top: 50px;
      color: #fff;
      font-size: 30px;
      letter-spacing: 3px;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div id="login">
    <div class="message" :class="message.type" v-if="message.text">{{message.text}}</div>
    <div class="progrom-title">
      从化绿波监控平台
    </div>
    <div class="login-form">
      <div class="form-item login-title">
        欢迎登录
      </div>
      <div>
        <div class="form-item">
          <div class="form-label">用户名:</div>
          <input type="text" v-model="username" id="username" placeholder="请输入用户名" required>
        </div>
        <div class="form-item">
          <div class="form-label">密码:</div>
          <input type="password" v-model="password" id="password" placeholder="请输入密码" required>
        </div>
      </div>
      <div class="form-item">
        <button class="primary-btn login-btn" @click="handleLogin" :disabled="!username || !password">
          <img src="./assets/jiazai.png" class="loading" v-if="loading" />
          登录
        </button>
      </div>
    </div>
  </div>
</body>
<script src="./js/vue3.js"></script>
<script src="./config.js"></script>
<script src="../../js/api/secondEdition.js"></script>
<script src="./js/crypto-js.min.js"></script>

<script>
  const { createApp, ref, nextTick, reactive, onMounted, onUnmounted, watch, computed } = Vue
  const app = createApp({
    setup() {
      const MESSAGE_TYPE = {
        'SUCCESS': 'success',
        'INFO': 'info',
        'ALERT': 'alert',
        'ERROR': 'error'
      }

      const message = reactive({
        type: '',
        text: ''
      })

      // 弹窗消息1.5秒消失
      watch(
        () => message.text,
        () => {
          if (message.text) {
            setTimeout(() => {
              message.text = ''
            }, 2000)
          }
        }
      )
      // 处理模拟数据
      const apiPreFix = computed(() => {
        return isMock ? '' : apiUrl
      })

      // 处理模拟数据
      const api = computed(() => {
        return isMock ? mockApi : realApi
      })

      const username = ref('')
      const password = ref('')

      const loading = ref(false)

      const handleLogin = async () => {
        console.log('CryptoJS', CryptoJS);
        
        loading.value = true
        const pws = CryptoJS.MD5(password.value).toString(CryptoJS.enc.Hex)
        // const pws11 = CryptoJS.MD5(password.value).toString(CryptoJS.enc.Hex)
        console.log('pws11', pws);
        // console.log('pws', {pws, pws11});
        // return
        fetch(apiPreFix.value + api.value.login, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              username: username.value,
              password: CryptoJS.MD5(password.value).toString(CryptoJS.enc.Hex),
            }),
        })
          .then(res => res.json())
          .then(res => {
            console.log(res.code)
            if (!res.err) {
              window.location.replace(window.location.origin)
            }
            else {
              message.type = MESSAGE_TYPE.ERROR
              message.text = res.err
            }
          }).finally(() => {
            loading.value = false
          })
      }

      onMounted(() => {
        window.localStorage.clear()
        window.sessionStorage.clear()
        // 旧版浏览器兼容方式
        document.addEventListener('keydown', function(event) {
          // Enter 键的 keyCode 是 13
          if (event.key === 'Enter' || event.keyCode === 13 || event.which === 13) {
            username.value && password.value && handleLogin()
          }
        });
      })

      return {
        username,
        password,
        message,
        loading,
        handleLogin
      }
    },
  })
  app.mount("#login");
</script>
</html>